<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css3 animation</title>
  <style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        width: 100vw;
        height: 100vh;
        background-color: darkcyan;
        display: flex;
        justify-content: center;
        align-items: center;
    }
  </style>


<!--  <style>-->
<!--      main {-->
<!--          margin-top: 150px;-->
<!--          width: 400px;-->
<!--          height: 400px;-->
<!--          border: 1px solid #ffffff;-->
<!--      }-->
<!--      .box {-->
<!--          width: 100px;-->
<!--          height: 100px;-->
<!--          background-color: orange;-->
<!--          animation-name: hj;-->
<!--          animation-duration: 4s;-->
<!--          animation-delay: 1s;-->
<!--          animation-fill-mode: forwards;-->
<!--      }-->

<!--      @keyframes hj {-->
<!--          25% {-->
<!--              transform: translateX(300px);-->
<!--          }-->
<!--          50% {-->
<!--              transform: translate(300px, 300px);-->
<!--              background-color: orange;-->
<!--              border-radius: 0;-->
<!--          }-->
<!--          75% {-->
<!--              transform: translateY(300px);-->
<!--          }-->
<!--          100% {-->
<!--              transform: translate(0, 0);-->
<!--              background-color: orchid;-->
<!--          }-->
<!--          25%, 75% {-->
<!--              background-color: green;-->
<!--              border-radius: 50%;-->
<!--          }-->
<!--      }-->
<!--  </style>-->

<!--  <style>-->
<!--      .box-normal {-->
<!--          width: 100px;-->
<!--          height: 100px;-->
<!--          background-color: orange;-->
<!--          margin: 100px auto;-->
<!--          animation-name: amplification;-->
<!--          animation-duration: 2s;-->
<!--          animation-delay: 1s;-->
<!--          animation-iteration-count: infinite;-->
<!--          animation-direction: normal;-->
<!--      }-->
<!--      .box-reverse {-->
<!--          width: 100px;-->
<!--          height: 100px;-->
<!--          background-color: orange;-->
<!--          margin: 100px auto;-->
<!--          animation-name: amplification;-->
<!--          animation-duration: 2s;-->
<!--          animation-delay: 1s;-->
<!--          animation-iteration-count: infinite;-->
<!--          animation-direction: reverse;-->
<!--      }-->
<!--      .box-alternate {-->
<!--          width: 100px;-->
<!--          height: 100px;-->
<!--          background-color: orange;-->
<!--          margin: 100px auto;-->
<!--          animation-name: amplification;-->
<!--          animation-duration: 2s;-->
<!--          animation-delay: 1s;-->
<!--          animation-iteration-count: infinite;-->
<!--          animation-direction: alternate;-->
<!--      }-->
<!--      .box-alternate-reverse {-->
<!--          width: 100px;-->
<!--          height: 100px;-->
<!--          background-color: orange;-->
<!--          margin: 100px auto;-->
<!--          animation-name: amplification;-->
<!--          animation-duration: 2s;-->
<!--          animation-delay: 1s;-->
<!--          animation-iteration-count: infinite;-->
<!--          animation-direction: alternate-reverse;-->
<!--      }-->

<!--      @keyframes amplification {-->
<!--          100% {-->
<!--              transform: scale(1.5);-->
<!--          }-->
<!--      }-->
<!--  </style>-->

  <style>
    .ball {
        width: 60px;
        height: 60px;
        background-image: radial-gradient(circle at center, orange, #f65409);
        border-radius: 50%;
        animation-name: ball;
        animation-duration: 1s;
        animation-direction: alternate-reverse;
        animation-iteration-count: infinite;
    }
    .shadow {
        position: absolute;
        transform: translateY(35px);
        width: 30px;
        height: 20px;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        z-index: -1;
        filter: blur(3px);
        animation-name: shadow;
        animation-duration: 1s;
        animation-direction: alternate-reverse;
        animation-iteration-count: infinite;
        animation-delay: 2s;
    }

    @keyframes ball {
        100% {
            transform: translateY(-200px);
        }
    }

    @keyframes shadow {
        100% {
            width: 100px;
        }
    }
  </style>

<!--  <style>-->
<!--    .box {-->
<!--        width: 100px;-->
<!--        height: 100px;-->
<!--        background-color: orange;-->
<!--        animation-name: scale;-->
<!--        animation-duration: 2s;-->
<!--        animation-delay: 2s;-->
<!--        animation-iteration-count: infinite;-->
<!--    }-->

<!--    @keyframes scale {-->
<!--        100% {-->
<!--            transform: scale(1.5);-->
<!--        }-->
<!--    }-->
<!--  </style>-->

<!--  <style>-->
<!--    .timing-box {-->
<!--        list-style: none;-->
<!--        display: flex;-->
<!--        justify-content: space-between;-->
<!--        text-align: center;-->
<!--    }-->
<!--    .timing-box li {-->
<!--        background-color: orange;-->
<!--        width: 100px;-->
<!--        height: 40px;-->
<!--        line-height: 40px;-->
<!--        margin-right: 10px;-->
<!--        animation-name: move;-->
<!--        animation-duration: 4s;-->
<!--        animation-iteration-count: infinite;-->
<!--        animation-delay: 1s;-->
<!--    }-->

<!--    li:nth-child(1) {-->
<!--        animation-timing-function: linear;-->
<!--    }-->
<!--    li:nth-child(2) {-->
<!--        animation-timing-function: ease;-->
<!--    }-->
<!--    li:nth-child(3) {-->
<!--        animation-timing-function: ease-in;-->
<!--    }-->
<!--    li:nth-child(4) {-->
<!--        animation-timing-function: ease-out;-->
<!--    }-->
<!--    li:nth-child(5) {-->
<!--        animation-timing-function: ease-in-out;-->
<!--    }-->
<!--    li:nth-child(6) {-->
<!--        white-space: nowrap;-->
<!--        width: 250px;-->
<!--        animation-timing-function: cubic-bezier(.08,.7,.73,.54);-->
<!--    }-->

<!--    @keyframes move {-->
<!--        100% {-->
<!--            transform: translateY(100vh);-->
<!--        }-->
<!--    }-->
<!--  </style>-->
</head>
<body>
<!--  <main>-->
<!--    <div class="box"></div>-->
<!--  </main>-->

<!--<div class="box-normal"> normal </div>-->
<!--<div class="box-reverse"> reverse </div>-->
<!--<div class="box-alternate"> alternate </div>-->
<!--<div class="box-alternate-reverse"> alternate-reverse </div>-->

<div class="ball"></div>
<div class="shadow"></div>

<!--<div class="box"></div>-->

<!--<ul class="timing-box">-->
<!--  <li>linear</li>-->
<!--  <li>ease</li>-->
<!--  <li>ease-in</li>-->
<!--  <li>ease-out</li>-->
<!--  <li>ease-in-out</li>-->
<!--  <li>cubic-bezier(.08,.7,.73,.54)</li>-->
<!--</ul>-->

<!--<ul class="steps-box">-->
<!--  <li>1</li>-->
<!--  <li>2</li>-->
<!--  <li>3</li>-->
<!--  <li>4</li>-->
<!--  <li>5</li>-->
<!--  <li>6</li>-->
<!--  <li>7</li>-->
<!--  <li>8</li>-->
<!--</ul>-->
<!--<style>-->
<!--  .steps-box {-->
<!--      margin-top: 100px;-->
<!--      list-style: none;-->
<!--      display: flex;-->
<!--      flex-wrap: wrap;-->
<!--      width: 400px;-->
<!--      height: 200px;-->
<!--      background-color: orange;-->
<!--  }-->
<!--  .steps-box li {-->
<!--      position: relative;-->
<!--      width: 100px;-->
<!--      height: 100px;-->
<!--      border-right: 1px solid #ffffff;-->
<!--      border-top: 1px solid #ffffff;-->
<!--      box-sizing: border-box;-->
<!--  }-->
<!--  .steps-box li:nth-child(1), .steps-box li:nth-child(5) {-->
<!--      border-left: 1px solid #ffffff;-->
<!--  }-->
<!--  .steps-box li:nth-child(n + 5) {-->
<!--      border-bottom: 1px solid #ffffff;-->
<!--  }-->
<!--  .steps-box li:nth-child(1):before,-->
<!--  .steps-box li:nth-child(5):before {-->
<!--      content: "";-->
<!--      width: 98px;-->
<!--      height: 98px;-->
<!--      position: absolute;-->
<!--      z-index: 2;-->
<!--      box-sizing: border-box;-->
<!--      animation-name: move;-->
<!--      animation-duration: 3s;-->
<!--      animation-iteration-count: infinite;-->
<!--  }-->

<!--  .steps-box li:nth-child(1):before {-->
<!--      content: "steps(4, start)";-->
<!--      background-color: orangered;-->
<!--      top: 0;-->
<!--      animation-timing-function: steps(4, start);-->
<!--  }-->
<!--  .steps-box li:nth-child(5):before {-->
<!--      content: "steps(4, end)";-->
<!--      background-color: orchid;-->
<!--      bottom: 0;-->
<!--      animation-timing-function: steps(4, end);-->
<!--  }-->

<!--  @keyframes move {-->
<!--      100% {-->
<!--          transform: translateX(400px);-->
<!--      }-->
<!--  }-->
<!--</style>-->


</body>
</html>
